//高阶组件 用于提取重复逻辑

import React from 'react';
import {Helmet} from "react-helmet";

let _this = null;

const popStateCallback = ()=> {
  // 使用popStateFn保存函数防止addEventListener重复注册
  if (_this && _this.getInitialProps) {
    console.log('popStateFn');
    _this.getInitialProps();
  }
};

export default (SourceComponent)=>{
  return class HoComponent extends React.Component {
    constructor(props) {
      super(props);

      this.state={
        initialData:{},
        canClientFetch:false//浏览器端是否需要请求数据
      }
    }
    //用于服务端调用
    static async getInitialProps(ctx){
      return SourceComponent.getInitialProps ? await SourceComponent.getInitialProps(ctx):{};
    }

    //用于封装处理
    async getInitialProps(){
      console.log('getInitialProps');

      // ssr首次进入页面以及csr/ssr切换路由时才调用组件的getInitialProps方法
      const {match,location} = this.props;
      const res =  SourceComponent.getInitialProps ? await SourceComponent.getInitialProps({match,location}) : {};
      this.setState({
        initialData: res,
        canClientFetch: true
      });

      // let { tdk } = res.page;
      // if (tdk) {
      //   document.title = tdk.title;
      // }
    }

    async componentDidMount() {
      //props.history.action=PUSH 跳转
      //props.history.action=POP 后退 or 前进; 第一次进入页面的时候action的值也是POP

      _this = this; // 修正_this指向，保证_this指向当前渲染的页面组件
      //注册事件，用于在页面回退的时候触发
      window.__IS_SSR__ && window.addEventListener('popstate', popStateCallback);

      console.log('this.props.history.action:',this.props.history.action);
      const canClientFetch = this.props.history && this.props.history.action === 'PUSH';//路由跳转的时候可以异步请求数据
      console.log('canClientFetch', canClientFetch);
      if (canClientFetch || !window.__IS_SSR__) {
        await this.getInitialProps();
      }
    }

    render() {
      // 只有在首次进入页面需要将window.__INITIAL_DATA__作为props，路由切换时不需要

      const props = {
        initialData:{},
        ...this.props
      };


      if(__SERVER__){
        //服务端渲染
        props.initialData = this.props.staticContext.initialData||{};
      }else{
        //客户端渲染
        if (this.state.canClientFetch) {//需要异步请求数据
          props.initialData = this.state.initialData||{};
        } else { //首次加载使用页面数据
          props.initialData = window.__INITIAL_DATA__;

          window.__INITIAL_DATA__={};//使用过后清除数据,否则其他页面会使用
        }
      }

      // if(!props.initialData.page||!props.initialData.page.tdk){
      //   !props.initialData.page && (props.initialData.page = {});
      //   props.initialData.page.tdk = {
      //     title: '默认标题 - my react ssr',
      //     keywords: '默认关键词',
      //     description: '默认描述'
      //   };
      // }

      return <>
        <SourceComponent  {...props}></SourceComponent>
        {/*<Helmet>*/}
        {/*  <title>{props.initialData.page.tdk.title}</title>*/}
        {/*  <meta name="description" content={props.initialData.page.tdk.description}/>*/}
        {/*  <meta name="keywords" content={props.initialData.page.tdk.keywords}/>*/}
        {/*</Helmet>*/}
      </>
    }
  }
}
